<template>
    <div class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in lunboList">
                    <a :href="item.url">
                        <img :src="item.imageUrl" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>    
</template>

<script>
    import $ from 'jquery';
    import Swiper from 'swiper';
    export default{
        data:function(){
            return{
                lunboList:[]
            }
        },
        mounted:function(){
            var self=this;
            var now=new Date().getTime();
            // ajax请求得到轮播图图片
            $.get('http://localhost:3000/lunbo?time='+now,function(res){
                self.lunboList=res.data.billboards;
                self.$nextTick(function(){
                    //引用Swiper轮播图
                    var mySwiper = new Swiper ('.swiper-container', {
                        loop: true,
                        autoplay : 3000, 
                        pagination: '.swiper-pagination', 
                        autoplayDisableOnInteraction: false
                    })
                })	
            })													
        }
    }
</script>